<!-- tabs切换 START -->
<div class="tabs-wrap card-container">
    <nz-tabset
        nzType="card"
        [nzSelectedIndex]="selectIndex">
        <nz-tab
            *ngFor="let item of tabLists"
            [nzTitle]="item.label"
            (nzClick)="changeTabs(item.value)">
        </nz-tab>
    </nz-tabset>
</div>
<!-- tabs切换 END -->

<div class="area-wrap">
    <!-- seach START -->
    <div class="seach-wrap">
        <div class="seach-lf">
            <button nz-button nzType="primary" (click)="onOpenModalAdd()" *ngIf="permission.userPermission.has('ihapp:appHardcoreArea:add')">新增</button>
            <!-- <button *ngIf="queryForm.platform == '5' || queryForm.platform == '6'" nz-button nzType="primary" nz-popover nzPopoverTitle="金刚区设置" [(nzPopoverVisible)]="visible"
                (click)="onHardcore()" nzPopoverPlacement="bottom" nzPopoverTrigger="click"
                [nzPopoverContent]="contentTemplate">
                爱乐物金刚区（{{popoverForm.kingKongSetting ? '显示' : '隐藏'}}）
            </button>
            <ng-template #contentTemplate>
                <nz-radio-group [(ngModel)]="popoverForm.kingKongSetting">
                    <label nz-radio [nzValue]="1">显示</label>
                    <label nz-radio [nzValue]="0">隐藏</label>
                </nz-radio-group>
                <footer style="margin-top: 20px;">
                    <button nz-button nzType="default" (click)="onClosePopover()" style="margin: 0 5px;">取消</button>
                    <button nz-button nzType="primary" (click)="onSurePopover()" style="margin: 0 5px;">确定</button>
                </footer>
            </ng-template> -->
            <div class="seach-item p-l-10">
                <label class="seach-label">活动时间</label>
                <div class="seach-control">
                    <nz-range-picker
                        nzInputReadOnly
                        [nzAllowClear]="true"
                        [nzShowTime]="true"
                        [(ngModel)]="activityDates"
                        (ngModelChange)="onTimeChange($event)">
                    </nz-range-picker>
                </div>
            </div>
        </div>

        <div nz-space class="seach-rt">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">状态</label>
                <div class="seach-control">
                    <nz-select nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="queryForm.status">
                        <nz-option nzValue="0" nzLabel="禁用"></nz-option>
                        <nz-option nzValue="1" nzLabel="启用"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" nzSearch (click)="onQuery()">查询</button>
            </div>
        </div>
    </div>
    <!-- seach END -->
    
    <main class="app-hardcore-area-main">
        <nz-table
            #rowSelectionTable
            nzShowSizeChanger
            nzOuterBordered
            [nzData]="tableData?.records"
            [nzShowPagination]="false"
            [nzPageSize]="tableData?.records?.size"
            [nzLoading]="tableLoading">
            <thead>
                <tr>
                    <th nzAlign="center">排序</th>
                    <th nzAlign="center" nzWidth="200px">名称</th>
                    <th nzAlign="center">日常图标</th>
                    <th nzAlign="center">活动图标</th>
                    <th nzAlign="center">日常角标</th>
                    <th nzAlign="center" nzWidth="400px">链接</th>
                    <th nzAlign="center" nzWidth="120px">状态</th>
                    <th nzAlign="center" nzWidth="300px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of tableData?.records; let i = index">
                    <!-- 排序 -->
                    <td nzAlign="center">{{ queryForm.pageSize * (queryForm.pageNum - 1) + i + 1 }}</td>
                    <!-- 名称 -->
                    <td nzAlign="center">{{item.ntName}}</td>
                    <!-- 日常图标 -->
                    <td nzAlign="center">
                        <img *ngIf="item.ntPicUrl" nz-image [nzSrc]="item.ntPicUrl" class="pic-icon">
                        <span *ngIf="!item.ntPicUrl">-</span>
                    </td>
                    <!-- 活动图标 -->
                    <td nzAlign="center">
                        <img *ngIf="item.activityPicture" nz-image [nzSrc]="item.activityPicture" class="pic-icon">
                        <span *ngIf="!item.activityPicture">-</span>
                    </td>
                    <!-- 日常角标 -->
                    <td nzAlign="center">
                        <img *ngIf="item.cornerMarker && item.cornerMarker !== 'null'" nz-image [nzSrc]="item.cornerMarker" class="pic-icon">
                        <span *ngIf="!item.cornerMarker || item.cornerMarker == 'null'">-</span>
                    </td>
                    <!-- 链接 -->
                    <td nzAlign="center">{{item.ntUrl || '-'}}</td>
                    <!-- 状态 -->
                    <td nzAlign="center" [class]="'font-' + item.status">{{status_to_text(item.status)}}</td>
                    <!-- 操作 -->
                    <td nzAlign="center" class="td-handle">
                        <button nz-button nzType="text" (click)="onTableMove(item, 'up')" [disabled]="queryForm.pageNum == 1 && i == 0" *ngIf="permission.userPermission.has('ihapp:appHardcoreArea:up')">上移</button>
                        <button nz-button nzType="text" (click)="onTableMove(item, 'down')" *ngIf="permission.userPermission.has('ihapp:appHardcoreArea:dn')"
                            [disabled]="disabledMoveBtn(i)" class="operate-button">下移</button>
                        <a nz-button nz-button-tdlink nzType="link" (click)="onTableEdit(item)" *ngIf="permission.userPermission.has('ihapp:appHardcoreArea:edit')">编辑</a>
                        <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?" *ngIf="permission.userPermission.has('ihapp:appHardcoreArea:delete')"
                            (nzOnConfirm)="onTableDelete(item)">删除
                        </a>
                        <a *ngIf="item.status == 1&&permission.userPermission.has('ihapp:appHardcoreArea:disable')" nz-button nz-button-tdlink nzType="link" nz-popconfirm
                            nzPopconfirmTitle="确认禁用吗?" (nzOnConfirm)="onTableDisable(item)">禁用</a>
                        <a *ngIf="item.status == 0&&permission.userPermission.has('ihapp:appHardcoreArea:disable')" nz-button nz-button-tdlink nzType="link" nz-popconfirm
                            nzPopconfirmTitle="确认启用吗?" (nzOnConfirm)="onTableEnable(item)">启用</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
        <div class="pagination-box">
            <div class="pagination-template">
                <ng-template #totalTemplate let-total> 共有 {{ tableData.total }} 条 </ng-template>
                <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]" nzShowSizeChanger nzShowQuickJumper
                    [nzPageIndex]="queryForm.pageNum" [nzTotal]="tableData.total" [nzShowTotal]="totalTemplate"
                    [nzPageSize]="queryForm.pageSize" (nzPageIndexChange)="onPageIndexChange($event)"
                    (nzPageSizeChange)="onPageSizeChange($event)">
                </nz-pagination>
            </div>
        </div>
    </main>
</div>

<nz-modal [nzWidth]="580" [(nzVisible)]="isModalShow" [nzTitle]="cacheData.id ? '编辑': '新增'" (nzOnCancel)="onModalClose()"
    [nzFooter]="null">
    <ng-container *nzModalContent>
        <!-- 名称 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>名称</nz-form-label>
            <nz-form-control nzSpan="20">
                <input nz-input maxlength="8" [(ngModel)]="modalForm.ntName" placeholder="请输入" />
            </nz-form-control>
        </nz-form-item>
        <!-- 日常图标 -->
        <nz-form-item class="upload-item">
            <nz-form-label nzSpan="4" nzRequired>日常图标</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-upload nzAccept="image/*" nzAction="" nzListType="picture-card"
                    (nzChange)="onModalPreview($event, 'ntPicUrl')" [nzShowUploadList]="false">
                    <ng-container *ngIf="!cacheData.ntPicUrl">
                        <i class="upload-icon" nz-icon nzType="plus"></i>
                    </ng-container>
                    <img *ngIf="cacheData.ntPicUrl" [src]="cacheData.ntPicUrl" style="width: 100%" />
                </nz-upload>
            </nz-form-control>
        </nz-form-item>
        <!-- 日常角标 -->
        <nz-form-item class="upload-item">
            <nz-form-label nzSpan="4">日常角标</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-upload nzAccept="image/*" nzAction="" nzListType="picture-card"
                    (nzChange)="onModalPreview($event, 'cornerMarker')" [nzShowUploadList]="false">
                    <ng-container *ngIf="!cacheData.cornerMarker || cacheData.cornerMarker == 'null'">
                        <i class="upload-icon" nz-icon nzType="plus"></i>
                    </ng-container>
                    <img *ngIf="cacheData.cornerMarker && cacheData.cornerMarker !== 'null'" [src]="cacheData.cornerMarker" style="width: 100%" />
                    <i *ngIf="cacheData.cornerMarker && cacheData.cornerMarker !== 'null'" (click)="onDelectImg();$event.stopPropagation();" nz-icon
                        nzType="close" nzTheme="outline" class="delete-icon"></i>
                </nz-upload>
            </nz-form-control>
        </nz-form-item>
        <!-- 活动图标 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">活动图标</nz-form-label>
            <nz-form-control nzSpan="20" class="upload-item">
                <nz-upload
                    nzAccept="image/*"
                    nzAction=""
                    nzListType="picture-card"
                    (nzChange)="onModalPreview($event, 'activityPicture')"
                    [nzShowUploadList]="false">
                    <ng-container *ngIf="!cacheData.activityPicture">
                        <i class="upload-icon" nz-icon nzType="plus"></i>
                    </ng-container>
                    <img *ngIf="cacheData.activityPicture" [src]="cacheData.activityPicture" style="width: 100%" />
                </nz-upload>
            </nz-form-control>
        </nz-form-item>
        <!-- 跳转方式
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>跳转方式</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.type">
                    <label
                        *ngFor="let item of typeSet | keyvalue"
                        nz-radio
                        nzValue="{{item.key}}">
                        {{ item.value }}
                    </label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item> -->
        <!-- 链接 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">链接</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-select
                    nzShowSearch
                    nzAllowClear
                    nzPlaceHolder="请选择链接"
                    [(ngModel)]="modalForm.ntUrl"
                >
                    <ng-container *ngFor="let option of mappingOptions">
                        <nz-option [nzLabel]="option.name" [nzValue]="option.key"></nz-option>
                    </ng-container>
                </nz-select>
                <p *ngIf="modalForm.ntUrl" class="mapping-remark">{{ remarkFilter(modalForm.ntUrl) }}</p>
            </nz-form-control>
        </nz-form-item>

        <!-- 参数 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">参数</nz-form-label>
            <nz-form-control nzSpan="20">
                <input
                    nz-input
                    placeholder="请输入参数，多个参数用@符号隔开"
                    [(ngModel)]="modalForm.params"
                />
            </nz-form-control>
        </nz-form-item>

        <!-- 状态 -->
        <nz-form-item>
            <nz-form-label nzSpan="4" nzRequired>状态</nz-form-label>
            <nz-form-control nzSpan="20">
                <nz-radio-group [(ngModel)]="modalForm.status">
                    <label nz-radio [nzValue]="0">禁用</label>
                    <label nz-radio [nzValue]="1">启用</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>

        <!-- 备注 -->
        <nz-form-item>
            <nz-form-label nzSpan="4">备注</nz-form-label>
            <nz-form-control nzSpan="20">
                <textarea nz-input [(ngModel)]="modalForm.bak" placeholder="请输入"></textarea>
            </nz-form-control>
        </nz-form-item>
        <footer class="app-modal-foot">
            <button nz-button nzType="default" (click)="onModalClose()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm()">确定</button>
        </footer>
    </ng-container>
</nz-modal>
